<template>
  <div class="pdf">
    <div class="pdf-tab">
      <div
        class="btn-def btn-pre"
        @click.stop="prePage">上一页
      </div>
      <div
        class="btn-def btn-next"
        @click.stop="nextPage">下一页
      </div>

    </div>
    <!--<div>进度：{{loadedRatio}}</div>-->
    <div>页面加载成功: {{curPageNum}}</div>
    <pdf
      ref="pdf"
      :src="pdfUrl"
      :page="pageNum"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum=$event"
      @error="pdfError($event)"
      @swipe="onSwipe"
      @link-clicked="page = $event">
    </pdf>
    <div>{{pageNum}}/{{pageTotalNum}}</div>

  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  import AnyTouch from 'any-touch';
  export default {
    name: 'Pdf',
    components: {
      pdf
    },
    data() {
      return {
        pdfUrl: "http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
        pageNum: 1,
        pageTotalNum: 1,
        // 加载进度
        loadedRatio: 0,
        curPageNum: 0,
      }
    },
    mounted() {
      // 没错, 就这2行
      const {destroy} = new AnyTouch(this.$el);
      this.on('hook:destroyed', destroy);
    },
    methods: {
      onSwipe(e){
        console.log(e)
      },
      prePage() {
        var p = this.pageNum
        p = p > 1 ? p - 1 : this.pageTotalNum
        this.pageNum = p
      },
      nextPage() {
        var p = this.pageNum
        p = p < this.pageTotalNum ? p + 1 : 1
        this.pageNum = p
      },
      pageLoaded(e) {
        this.curPageNum = e
      },
      pdfError(error) {
        console.error(error)
      },
      pdfPrintAll() {
        this.$refs.pdf.print()
      },
      pdfPrint() {
        this.$refs.pdf.print(100, [1, 2])
      },
    }
  }
</script>
